<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
           html,body{
            height:100%;
            }
            body{
                margin:0;
                padding: 0;
            }
            .box{
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            .header{
                background-color: green;
                height: 70px;
                display: flex;
            }
            .logo{
                width: 200px;
                flex-shrink:0;
                background-color: cornflowerblue;
            }
            .header-right{
                flex-grow: 1;
                display: flex;
                justify-content:space-between;
            }
            .title{
                display: flex;
                align-items: center;
                flex-shrink: 0;
                background-color: goldenrod;
                font-size: 30px;
            }
            .user{
                display: flex;
                align-items: center;
                flex-shrink: 0;
                margin-right: 40px;
                background-color: orchid;
                font-size: 18px;
            }

            .body{
                background-color: peru;
                flex-grow:1;
                display: flex;
            }
            .body-bar{
                width: 200px;
                flex-shrink:0;
                background-color: lightseagreen;
            }
            .bady-content{
                flex-grow: 1;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="header">
                <div class="logo" @click="changeBar">
                    logo
                </div>
                <div class="header-right">
                    <div class="title">
                        我是xxx管理系统
                    </div>
                    <div class="user">
                        用户
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="body-bar" v-show="showBar">
                    导航
                </div>
                <div class="body-content">
                    内容
                </div>
            </div>
        </div>
        <script src="../assets/js/vue.min.js"></script>
        <script>
            new Vue({
                el: ".box",
                data: {
                    showBar: true
                },
                methods:{
                    changeBar: function(){
                        this.showBar = !this.showBar;
                    }
                }
            });
        </script>   
    </body>
</html>